import { lazy, Suspense } from 'react';
import { useRoutes } from 'react-router-dom';
import { Loading } from '@/components/ui/Loading';

// Lazy load pages
const Home = lazy(() => import('@/pages/Home').then(module => ({ 
  default: module.Home 
})));

const About = lazy(() => import('@/pages/About').then(module => ({ 
  default: module.About 
})));

export const AppRoutes = () => {
  const routes = useRoutes([
    {
      path: '/',
      element: (
        <Suspense fallback={<Loading />}>
          <Home />
        </Suspense>
      ),
    },
    {
      path: '/about',
      element: (
        <Suspense fallback={<Loading />}>
          <About />
        </Suspense>
      ),
    },
  ]);

  return routes;
};